<template>
  <div class="content">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="select"
        type="selection"
        width="65"
      ></el-table-column>
      <el-table-column
        v-for="(item, i) in tablelist"
        :key="i"
        :prop="item.prop"
        :label="item.label"
      >
        <template slot-scope="scope">
          <!-- 没有状态时的展示 -->
          <div v-if="item.type === 'text'">{{ scope.row[item.prop] }}</div>
          <!-- 判断是否传进来的是图片 -->
          <div v-if="item.type === 'img'" id="imgs">
            <img :src="scope.row[item.prop]" alt="" />
          </div>
          <!-- 判断是否传进来的是对象 -->
          <div v-if="item.type === 'object'">
            <div v-for="(items, index) in scope.row[items.prop]" :key="index">
              {{ items[item.name] }}
            </div>
          </div>
          <!-- 判断是否传进来的需要携带图标 -->
          <div v-if="item.type === 'edit'">
            <div>{{ scope.row[item.prop] }}</div>
            <i class="el-icon-edit" @click="editrow(scope.row)"></i>
          </div>
          <!-- 判断类型是否为滑块 -->
          <div v-if="item.type === 'btns'">
            <el-switch
              v-model="scope.row[item.prop]"
              @change="change(scope.row[item.prop])"
            ></el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="300" v-if="changeedit">
        <template slot-scope="scope">
          <slot name="btns" :data="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class extends Vue {
  @Prop({}) tablelist!: {}[]; // 存放对应的key
  @Prop({}) tableData!: {}[]; // 存放对应的value
  @Prop({}) select!: boolean; // 判断选择框是否需要
  @Prop({ default: true }) changeedit!: boolean; // 判断选择框是否需要
  private handleSelectionChange(e: any) {
    // select选择事件
    console.log(e);
  }

  private editrow(row: any) {
    // 编辑事件
    console.log(row);
  }

  private change(val: any) {
    this.$emit("changeline", val);
  }
}
</script>

<style lang="scss" scoped>
#imgs {
  img {
    width: 80%;
    max-width: 200px;
    height: 80px;
    border-radius: 10px;
  }
}
</style>
